<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>组织机构列表</title>
		<link rel="stylesheet" href="../../css/ztreeStructure.css" type="text/css">
		<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
		<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
		<link rel='stylesheet' type='text/css' href='../../css/style.css' />
		<link rel='stylesheet' type='text/css' href='../../css/list.css' />
		<link rel="stylesheet" type="text/css" href="../../js/layui-add-tree/css/layui-add-tree.css"/>
	<style>
			/* 左边产品 */
			
			.searchProduct {
				font-size: 15px;
				font-weight: bolder;
				margin-left: 10px;
			}
			
			.searchProduct p {
				margin-bottom: 20px;
			}
			
			.searchProduct input {
				border: 1px solid rgb(222, 235, 252);
			}
			
			.treeList {
				margin-top: 10px;
			}
			
			#productTree a {
				display: block;
				text-align: center;
				vertical-align: middle;
				width: 90%;
				line-height: 20px;
				font-size: 14px;
				padding: 3px 10px;
				color: rgb(80, 80, 80);
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: nowrap;
			}
			
			#productTree a:hover {
				font: bold;
				background: rgb(130, 200, 240);
				color: white;
			}
			
			#productCode {
				width: 120px;
			}
			
			#searchButton {
				outline: none;
				border: none;
				margin-left: 0px;
			}
			
			#productTree .node0 li {
				margin-left: 10px;
				margin-top: 10px;
			}
			
			#productTree span {
				display: block;
				text-align: left;
				vertical-align: middle;
				width: 100%;
				line-height: 20px;
				font-size: 14px;
				font-weight: bold;
			}
			
			.org_window {
				width: 800px;
				height: 300px;
				text-align: center;
				position: absolute;
				top: 35%;
				left: 30%;
				margin-left: -150px;
				margin-top: -100px;
				background: rgb(245, 245, 245);
				border: 1px solid rgb(200, 200, 200);
				box-shadow: 5px 5px 5px rgb(100, 100, 100);
			}
			
			.org_window p {
				text-align: center;
				height: 30px;
				background: rgb(68, 161, 248);
				line-height: 30px;
				color: white;
				margin-bottom: 25px;
			}
			.td_with {
				width: 243px;
			}
		</style>
	</head>

	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
				<p class="contentText local">
					<span>位置：系统管理 > 组织机构管理</span>
				</p>
				<input style="display:none;" id="pageFlag" value="listPage">
				<div id="" class="show_list" style="height: 95%;">
					<div class="flex-td-18 floatLeft" style="height: 100%;background: rgb(245, 250, 255);white-space: nowrap">
						<input style="width: 82px; margin: 5px 0 0 10px;" type="text" name="" id="projectSearch" value="" />
						<span style="margin-left: 10px; text-indent: 22px;" class="bgd_blue_search" onclick="TaskList.projectSearch();">查询</span>
						<div id="treeDemo" class="ztree"></div>
					</div>

					<div class="flex-td-82 floatLeft" >
						<div id="orgListArea">
							<div id="" class="title_operate" style="width: 100%" >
								<h4 class="sel_title"><img src='../../img/list/brand1.png' id="" class="" name=""/>
									<span  id="" class="">组织机构列表</span>
									</h4>
								<div class="operate_area" id="operate_area" style="display: block">
									<a class="bgd_delete img_hand" id="del">删除</a>
								</div>
							</div>
							<div id="" class="show_area" >
								<table class="tablelist" style="width: 100%;height: 100px;" border="1" cellspacing="0" cellpadding="0" id="">
									<tbody>
										<tr class="menuText list_head">
											<th class="checkSelectAll"></th>
											<th>组织机构名称</th>
											<th>组织机构编码</th>
											<th>上级组织机构</th>
											<th>组织机构描述</th>
										</tr>
									</tbody>
									<tbody class="tablelist" id="organizationList">
										<tr class="listTableText list_list" >
											<td style="width: 60px;"><input type="checkbox" class="input_checkBox" name="" id="" value=""></td>
											<td >
												<a class="cursor editBlue" id="upDaOrganization">二分厂</a>
											</td>
											<td >010001</td>
											<td >吉林江机特种工业有限公司</td>
											<td ></td>
										</tr>
										<tr class="listTableText list_list ">
											<td><input type="checkbox" class="input_checkBox" name="" id="" value=""></td>
											<td >
												<a class="cursor editBlue" id="upDaOrganization">二分厂</a>
											</td>
											<td>010001</td>
											<td>吉林江机特种工业有限公司</td>
											<td></td>
										</tr>
										<tr class="listTableText list_list">
											<td><input type="checkbox" class="input_checkBox" name="" id="" value=""></td>
											<td>
												<a class="cursor editBlue" id="upDaOrganization">二分厂</a>
											</td>
											<td>010001</td>
											<td>吉林江机特种工业有限公司</td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<!--<div id="tablelPage" class="page_area contentText clear"></div>-->
								  <!-- 页码区域 -->
	                    <div class="page_area contentText clear">
	                    	<div class="page_sum">
	                    		共<span class="page_number"> 3 </span>页&emsp;每页 10 条&emsp;共<span class="info_sum"> 27 </span>条记录
	                    	</div>
	                        <div class="page_jump">
	                        	<span>跳转到&emsp;第</span>
	                        	<input type="text" name="" id="" value="" />
	                        	<span>页&emsp;</span>
	                        	<button>Go</button>
	                        </div>
	                        <div class="page-pull-right async-page">
	                            <button>上一页</button>
	                            <button class="select_page">1</button>
	                            <button>2</button>
	                            <button>3</button>
	                            <button style="color: rgb(30, 30, 30);">▪▪▪</button>
	                            <button>98</button>
	                            <button>99</button>
	                            <button>100</button>
	                            <button>下一页</button>
	                        </div>
	                    </div>
							</div>

						</div>
						<div id="addOrgArea" class="mask hidden">
							<div class="org_window" style="">
								<p>新增组织机构</p>
								<div class="article_list" style="width: 90%; margin: 0px auto;">
									<!------- 添加内容 ------->
									<div class="content content1">
										<!-- 用户列表内容区 -->
										<div class="con con_01">
											<!-- 表单信息填写区 -->
											<h4 class="sel_title" style="text-align: left;">
												<img src="../../img/list/brand1.png" /><span>填写组织机构信息</span><span
													class="necessary">（带*号为必填项）</span>
											</h4>
											<div class="write_area">
												<sf:form method="post" id="addFrom" modelAttribute="organization">
													<table class="contentText" border="1" cellspacing="0" width="100%" cellpadding="0">
														<tr>
															<th>组织机构编码：</th>
															<td class="addRemind">
																<input id="parentOrgId" name="parentOrgId" type="hidden" value="">
																<input id="id" name="id" type="hidden" value="">
																<input id="orgaCode" name="orgaCode" type="text" value="">
																<span class="redColor">*</span>
															</td>
															<th>组织机构名称：</th>
															<td class="addRemind">
																<input id="orgaName" name="orgaName" type="text" value="">
																<span class="redColor">*</span>
															</td>
														</tr>
														<tr>
															<th>上级组织机构：</th>
															<td class="">
																<input id="" name="" type="text" value="吉林江机特种工业有限公司" readonly="readonly">
															</td>
														</tr>
														<tr>
															<th>组织机构描述：</th>
															<td colspan="3">
																<textarea id="orgaDesc" name="orgaDesc" style="width: 95%; height: 100px;"></textarea>
														</tr>
													</table>
												</sf:form>
												<!-- 保存、重置按钮区 -->
												<div align="center" class="btn_submit" style="margin-top: 20px;">
													<a href="organizationList.html" class="bgd_blue_two img_hand">确定</a>
													<a href="organizationList.html" class="bgd_white_two img_hand">返回</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--
                        	作者：offline
                        	时间：2020-02-24
                        	描述：修改页面
                        -->
						<div id="upDateOrgArea" class="mask hidden">
							<div class="org_window" style="">
								<p>编辑组织机构</p>
								<div class="article_list" style="width: 90%; margin: 0px auto;">
									<!------- 添加内容 ------->
									<div class="content content1">
										<!-- 用户列表内容区 -->
										<div class="con con_01">
											<!-- 表单信息填写区 -->
											<h4 class="sel_title" style="text-align: left;">
												<img src="../../img/list/brand1.png" /><span>填写组织机构信息</span><span
													class="necessary">（带*号为必填项）</span>
											</h4>
											<div class="write_area">
												<sf:form method="post" id="addFrom" modelAttribute="organization">
													<table class="contentText" border="1" cellspacing="0" width="100%" cellpadding="0">
														<tr>
															<th>组织机构编码：</th>
															<td class="addRemind">
																<input id="parentOrgId" name="parentOrgId" type="hidden" value="">
																<input id="id" name="id" type="hidden" value="">
																<input id="orgaCode" name="orgaCode" type="text" value="010001">
																<span class="redColor">*</span>
															</td>
															<th>组织机构名称：</th>
															<td class="addRemind">
																<input id="orgaName" name="orgaName" type="text" value="二分厂">
																<span class="redColor">*</span>
															</td>
														</tr>
														<tr>
															<th>上级组织机构：</th>
															<td class="addRemind">
																<label id = "fenchang"></label>
																<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="openTree()">选择分厂</button>
																<span class="redColor">*</span>
															</td>
														</tr>
														<tr>
															<th>组织机构描述：</th>
															<td colspan="3">
																<textarea id="orgaDesc" name="orgaDesc" style="width: 95%; height: 100px;"></textarea>
														</tr>
													</table>
												</sf:form>
												<!-- 保存、重置按钮区 -->
												<div align="center" class="btn_submit" style="margin-top: 20px;">
													<a href="organizationList.html" class="bgd_blue_two img_hand">确定</a>
													<a href="organizationList.html" class="bgd_white_two img_hand">返回</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="content_wrap" hidden="hidden">
				<div id="test1" class="demo-tree demo-tree-box"></div>
			</div>
			<!-- 版尾  -->
			<div class="ending">
				Copyright 2019-2020 磐基技术有限公司
			</div>
		</div>
	</body>
	<script src='../../js/3rd/jquery-1.9.1.min.js' type='text/javascript' charset='utf-8'></script>
	<script src="../../js/3rd/ztree/jquery.ztree.core-3.5.js" type="text/javascript"></script>
	<script src="../../js/3rd/ztree/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
	<script src="../../js/3rd/ztree/jquery.ztree.exedit-3.5.js" type="text/javascript"></script>
	<script src='../../js/common/common.js' type='text/javascript' charset='utf-8'></script>
	<script src="../../js/sysmanager/organizationList.js" type="text/javascript"></script>
	<script src="../../js/3rd/jquery.validate.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../js/sysmanager/organizationAdd.js"></script>
	<script type="text/javascript" src="../../js/sysmanager/orgUpdate.js"></script>
	<script src="../../js/layui-add-tree/layui-add-tree.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset='utf-8'>
		var basePath = '../../';
		/*	var menujson=<%=menuZtree %>;*/
		var button = '${buttonList}';
		//页面左边的树形结构
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: true
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				onClick: treenodeClick
			}
		};

		var zNodes = [{
				id: 0,
				pId: -1,
				name: "吉林江机特种工业有限公司",
				open: true
			},
			{
				id: 1,
				pId: 0,
				name: "七分厂"
			},
			{
				id: 2,
				pId: 0,
				name: "二分厂"
			},
			{
				id: 3,
				pId: 0,
				name: "信息管理部"
			},
			{
				id: 4,
				pId: 1,
				name: "电装车间"
			},
		];
		var log, className = "dark";

		function beforeDrag(treeId, treeNodes) {
			return false;
		}

		function beforeEditName(treeId, treeNode) { //
			className = (className === "dark" ? "" : "dark");
			showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			console.log("1" + treeNode.name + "pId:" + treeNode.pId + "id:" + treeNode.id);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return treeNode.name;
		}

		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "" : "dark");
			showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			console.log("2" + treeNode.name + "pId:" + treeNode.pId + "id:" + treeNode.id);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}

		function onRemove(e, treeId, treeNode) {
			showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			console.log("3" + treeNode.name + "pId:" + treeNode.pId + "id:" + treeNode.id);
		}

		function beforeRename(treeId, treeNode, newName) {
			className = (className === "dark" ? "" : "dark");
			showLog("[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			console.log("4" + treeNode.name + "pId:" + treeNode.pId + "id:" + treeNode.id);
			if(newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function() {
					zTree.editName(treeNode)
				}, 10);
				return false;
			}
			return true;
		}
		//获取点击节点的子节点--开始
		function treenodeClick(event, treeId, treeNode, clickFlag) {
			//此处treeNode 为当前节点
			var str = '';
			str = getAllChildrenNodes(treeNode, str);
			// 加上被选择节点自己
			str = str + ',' + treeNode.id;
			// 去掉最前面的逗号
			var ids = str.substring(1, str.length);
			// 得到所有节点ID 的数组
			var idsArray = ids.split(',');
			Organizations.getDataForAllNodes(idsArray);
			// 得到节点总数量
			var length = idsArray.length;

			// 做业务操作
		}

		// 递归，获取所有子节点
		function getAllChildrenNodes(treeNode, result) {
			if(treeNode.isParent) {
				var childrenNodes = treeNode.children;
				if(childrenNodes) {
					for(var i = 0; i < childrenNodes.length; i++) {
						result += ',' + childrenNodes[i].id;
						result = getAllChildrenNodes(childrenNodes[i], result);
					}
				}
			}
			return result;
		}
		//获取所有节点的子节点--结束
		function onRename(e, treeId, treeNode) {
			showLog("[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			console.log("5" + treeNode.name + "pId:" + treeNode.pId + "id:" + treeNode.id);
		}

		function showRemoveBtn(treeId, treeNode) {
			return !treeNode.isFirstNode;
		}

		function showRenameBtn(treeId, treeNode) {
			return !treeNode.isLastNode;
		}

		function showLog(str) {
			if(!log) log = $("#log");
			log.append("<li class='" + className + "'>" + str + "</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}

		function getTime() {
			var now = new Date(),
				h = now.getHours(),
				m = now.getMinutes(),
				s = now.getSeconds(),
				ms = now.getMilliseconds();
			return(h + ":" + m + ":" + s + " " + ms);
		}

		var newCount = 1;

		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if(treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
			//进行权限控制按钮的添加
			var addStr = "<span class='button add' id='addBtn_" + treeNode.id +
				"' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_" + treeNode.id);
			if(btn) btn.bind("click", function() {
				var ztreeId = treeNode.id;
				$("#parentOrgId").val(ztreeId);
				//点击新增页面
				// 当前节点信息 id - 对应的是新增的pId
				$("#addOrgArea").removeClass("hidden");
			});
		};

		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_" + treeNode.id).unbind().remove();
		};

		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
		}

		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});
		//获取所有得的节点
		function getAllNode() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var zTteeDate = zTree.getNodes();
			var ztree = zTree.transformToArray(zTteeDate);
		}
		//修改页面弹框
		$("#upDaOrganization").click(function(){
			$("#upDateOrgArea").removeClass("hidden");
		})
		// 删除
		$("#del").click(function(){
			var list = [];//项目中要删除的id集合
				var checks = $("input[type='checkbox']:checked");
				$.each(checks,function(index, obj) {
					list.push(obj.id);
				});
			
				if(list.length <= 0) {
					alert("请至少选择一条数据");
					return;
				}
				
				window.confirm("确定要删除吗?",function(result){
				});
		})
		
		function openTree(){
			var that = this; 
			  //多窗口模式，层叠置顶
			  layer.open({
				type: 1
				,area: ['400px', '300px']
				,shade: 0
				,content: $('.content_wrap')
				
			  });
			   
		}
		
		
		layui.use(['tree', 'util'], function(){
		  var tree = layui.tree
		  ,layer = layui.layer
		  ,util = layui.util
		  
		  //模拟数据1
		  ,data1 = [{
			title: '吉林江机特种工业有限公司'
			,id: 1
			,children: [{
			  title: '七分厂'
			  ,id: 1000
			  ,children: [{
				title: '电装车间'
				,id: 10001
			  }]
			},{
			  title: '二分厂'
			  ,id: 1001
			},{
			  title: '信息管理部'
			  ,id: 1002
			}]
		  }];
		  
		 
		  
		 
		  //常规用法
		  tree.render({
			elem: '#test1' //默认是点击节点可进行收缩
			,data: data1
			,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
			,click: function(obj){
				//alert(JSON.stringify(obj.data.title));
				$("#fenchang").html(JSON.stringify(obj.data.title));
				layer.closeAll();
			}
		  });
		  
		 
		});
	</script>
	<style type="text/css">
		.ztree li span.button.add {
			margin-left: 3px;
			margin-right: -1px;
			background-position: -144px 0;
			vertical-align: top;
			*vertical-align: middle
		}
	</style>
	</script>

</html>